<template>
  <div>
    <h1>管理员列表</h1>
    <el-table :data="adminList" style="width: 100%">
      <el-table-column
        prop="adminid"
        label="管理员编号"
        width="240"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="adminname"
        label="姓名"
        width="180"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="role"
        label="角色"
        width="200"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-popconfirm
            title="亲，您真的要删除吗?"
            @confirm="deleteAdmin(scope.row.adminid)"
          >
            <template #reference>
              <el-button class="del">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button @click="editShowFn(scope.row.adminname)" class="xg"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <teleport to="body">
      <div v-show="flag === 1" class="mask">
        <!-- 设置遮罩层 -->
        <Edit
          v-show="isShowEdit"
          @hide="hideFn"
          :adminname="editAdminName"
          @updatesuccess="successFn"
        ></Edit>
      </div>
    </teleport>
  </div>
</template>

<script setup lang='ts'>
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import Edit from "./Edit.vue";
interface IAdmin {
  adminname: string;
  password: string;
  role: number; //1:表示超级管理员，2：普通管理员
  adminid: string;
  checkedKeys: string[];
}
const adminList = reactive<IAdmin[]>([]);

const getAdminList = () => {
  service({
    url: "/admin/list",
  }).then((res) => {
    if (res.data.code == "200") {
      adminList.length = 0;
      adminList.push(...res.data.data);
    }
  });
};
getAdminList();
// 2.删除管理员
const deleteAdmin = (adminid: string) => {
  service({
    url: "/admin/delete",
    method: "post",
    data: {
      adminid,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "删除成功！",
        type: "success",
      });
      getAdminList();
    }
  });
};
// 3.修改相关
let flag = ref(0);
const isShowEdit = ref(false);
const editAdminName = ref("");
const editShowFn = (adminname: string) => {
  editAdminName.value = adminname;
  isShowEdit.value = true;
  flag.value = 1;
};
const hideFn = () => {
  isShowEdit.value = false;
  flag.value = 0;
};
const successFn = () => {
  getAdminList();
};
</script>

<style scoped>
.img {
  width: 200px;
  height: 150px;
}
.del {
  background-color: rgb(238, 93, 93);
  color: white;
  border-radius: 10px;
}
.xg {
  background-color: rgb(116, 160, 243);
  color: white;
  border-radius: 10px;
}
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
</style>